<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" clearable style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model.trim="searchForm.idcard" clearable></el-input>
      </el-form-item>
      <el-form-item label="服务社区">
        <org-select v-model="searchForm.orgId" />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="searchForm" />
        <el-button type="primary" icon="el-icon-plus" @click="onAddClick()">增加</el-button>
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/volunteer/volunteer/page"
    >
      <el-table-column prop="name" label="姓名" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="gender" label="性别" width="50"></el-table-column>
      <el-table-column prop="age" label="年龄" width="50"></el-table-column>
      <el-table-column prop="idcard" label="身份证号码" width="174"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
      <el-table-column prop="serviceOrgName" label="服务社区" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="152"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button
            @click="onDetailsClick(row)"
          >
            详情
          </el-button>
          <el-button
            type="info"
            plain
            @click="onUpdateClick(row)"
          >
            修改
          </el-button>
          <el-button
            type="warning"
            plain
            @click="onHelpRecordClick(row)"
          >
            服务记录
          </el-button>
        </template>
      </el-table-column>
    </data-table>

    <volunteer-details ref="volunteerDetails" />
  </data-table-app-page>
</template>

<script>
import { Select } from 'element-ui';
import VolunteerDetails from './VolunteerDetails';

export default {
  pageProps: {
    title: '志愿者管理'
  },
  components: {
    OrgSelect: () => ({ component: import('@/pages/org/OrgSelect.vue'), loading: Select, delay: 0 }),
    VolunteerDetails
  },
  data() {
    return {
      searchForm: {}
    }
  },
  methods: {
    onAddClick() {
      this.pushPage({
        path: '/volunteer/volunteer/edit',
        key: 'add',
        params: {
          mode: 'add',
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },
    onUpdateClick({userId}) {
      this.pushPage({
        path: '/volunteer/volunteer/edit',
        key: userId,
        params: {
          mode: 'update',
          userId,
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },
    async onDetailsClick({userId}) {
      this.$refs.volunteerDetails.show(userId);
    },
    onHelpRecordClick(volunteer) {
      this.pushPage({
        path: '/volunteer/volunteer/help-record',
        params: { volunteer },
        key: volunteer.userId,
        subTitle: volunteer.name
      });
    }
  }
}
</script>